<template>
    <div>
        <el-row>
            <el-col :span="22" id="selectdiv">

                <el-form :inline="true" :model="selectData" class="demo-form-inline">

                    <el-form-item label="评审类别" prop="classId">
                        <el-select v-model="selectData.classId" placeholder="请选择类别">
                            <el-option v-for="cls in classes" :key="cls.classId" :label="cls.className" :value="cls.classId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="评分题目" label-position="left">
                        <el-input v-model="selectData.scName" placeholder="评分细则题目"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 80px;">
                        <el-button size="small" type="primary" @click="findByData">查询</el-button>
                    </el-form-item>
                    <el-form-item style="width: 80px;">
                        <el-button size="small" type="primary" @click="clear">清除</el-button>
                    </el-form-item>
                </el-form>

            </el-col>
            <el-col :span="2" style="margin-bottom: 22px;">
                <div class="grid-content bg-purple-light">
                    <el-button size="small" type="primary" @click="opendialog"
                        style="margin-top:6px;z-index:1;position:relative">新增</el-button>
                    <el-dialog title="新增信息" :visible.sync="dialogFormVisible" id="adddialog"
                        :close-on-click-modal="false" @close="cancelAdd">
                        <el-form :model="criterionForm" :rules="rules" ref="criterionForm">
                            <el-form-item label="评分标准类别" prop="classId" :label-width="formLabelWidth">
                                <el-select v-model="criterionForm.classId" placeholder="类别">
                                    <el-option v-for="cls in classes" :key="cls.classId" :label="cls.className" :value="cls.classId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="评分标准名字" :label-width="formLabelWidth"  prop="scName">
                                <el-input v-model="criterionForm.scName" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="评分标准内容" :label-width="formLabelWidth"  prop="scContent">
                                <el-input type="textarea"
  :rows="2" v-model="criterionForm.scContent" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="评分标准权重" :label-width="formLabelWidth"  prop="scWeight">
                                <el-input v-model="criterionForm.scWeight" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="评分标准最低分" :label-width="formLabelWidth">
                                <el-input v-model="criterionForm.scMinvalue" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="评分标准最高分" :label-width="formLabelWidth">
                                <el-input v-model="criterionForm.scMaxvalue" disabled></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="cancelAdd">取 消</el-button>
                            <el-button type="primary" @click="submitAdd">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
        <!-- 新增按钮 -->


        <!-- 表格展示 -->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%" border>
            <el-table-column prop="scId" label="评分标准id" width="100"></el-table-column>
            <el-table-column prop="classId" label="评分标准类别" width="100">
                <template slot-scope="scope" v-if="scope && classes[scope.row.classId-1]">
                    {{ classes[scope.row.classId-1].className }}
                </template>
            </el-table-column>
        <el-table-column label="评分标准题目" width="250">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top" width="300">
                    <p>题目: {{ scope.row.scName }}</p>
                    <p>内容: {{ scope.row.scContent }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag>{{ scope.row.scName }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="scWeight" label="评分标准权重"></el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button size="small" @click="editRow(scope.$index, scope.row)">编辑</el-button>
                
            </template>
        </el-table-column>
            <!-- 其他列... -->
        </el-table>
        <el-dialog title="编辑信息" :visible.sync="dialogEditFormVisible" id="EditDialog" :close-on-click-modal="false"
            @close="resetForm('Editformdata')">
            <el-form :model="editformData" class="parentBox" ref="editformData" :rules="editrule" label-position="left">
                <el-form-item label="评分标准类别" prop="classId" :label-width="formLabelWidth">
                    <el-select v-model="editformData.classId" placeholder="类别">
                        <el-option v-for="cls in classes" :key="cls.classId" :label="cls.className" :value="cls.classId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="评分标准名字" :label-width="formLabelWidth" prop="scName">
                    <el-input v-model="editformData.scName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="评分标准内容" :label-width="formLabelWidth" prop="scContent">
                    <el-input  type="textarea"
  :rows="2" v-model="editformData.scContent" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="评分标准权重" :label-width="formLabelWidth" prop="scWeight">
                    <el-input v-model="editformData.scWeight" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="评分标准最低分" :label-width="formLabelWidth">
                    <el-input v-model="editformData.scMinvalue" disabled></el-input>
                </el-form-item>
                <el-form-item label="评分标准最高分" :label-width="formLabelWidth">
                    <el-input v-model="editformData.scMaxvalue" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Editcancel">取 消</el-button>
                <el-button type="primary" @click="submitEditForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 分页组件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
        </el-pagination>


    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableHeight: window.innerHeight - 200,
                headers: { 'Content-Type': 'multipart/form-data' },
                dialogFormVisible: false,
                dialogEditFormVisible:false,
                formLabelWidth: '120px',
                selectData: {
                    classId: '',
                    scName: '',
                },
                classes: [{
                    classId: '',
                    className: ''
                }
                ],
                tableData: []
                , // 表格数据
                currentPage: 1, // 当前页码
                pageSize: 10, // 每页显示数量
                totalCount: 0, // 总记录数
                criterionForm:{
                    classId:'',
                    scName:'',
                    scContent:'',
                    scWeight:'',
                    scMinvalue:1,
                    scMaxvalue:100,
                },
                editformData:{
                    scId:'',
                    classId: '',
                    scName: '',
                    scContent: '',
                    scWeight: '',
                    scMinvalue: 1,
                    scMaxvalue: 100,
                },
                rowData:{
                    scId:'',
                    classId: '',
                    scName: '',
                    scContent: '',
                    scWeight: '',
                    scMinvalue: 1,
                    scMaxvalue: 100,
                },
                rules:{
                    classId:[
                      { required: true, message: '请选择评分标准类别', trigger: 'change' }
                    ],
                    scName:[
                    { required: true, message: '请输入评分标准名称', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    scContent:[
                    {required: true, message: '请输入评分标准内容', trigger: 'blur'}
                    ],
                    scWeight:[
                    
                    {
                            required:true,
                            validator: (rule, value, callback) => {
                                // 正则表达式匹配两位小数
                                const decimalRegex = /^\d+(\.\d{1,2})?$/;
                                if (!decimalRegex.test(value)) {
                                    callback(new Error('请输入最多两位小数的数字'));
                                } else if (value <= 0 || value >= 1) {
                                    callback(new Error('请输入一个大于0且小于1的数字'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: ['blur', 'change'] // 在失焦或值改变时触发校验
                        }
                    ]
                },
                editrule:{
                    classId: [
                        { required: true, message: '请选择评分标准类别', trigger: 'change' }
                    ],
                    scName: [
                        { required: true, message: '请输入评分标准名称', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    scContent: [
                        { required: true, message: '请输入评分标准内容', trigger: 'blur' }
                    ],
                    scWeight: [

                        {
                            required: true,
                            validator: (rule, value, callback) => {
                                // 正则表达式匹配两位小数
                                const decimalRegex = /^\d+(\.\d{1,2})?$/;
                                if (!decimalRegex.test(value)) {
                                    callback(new Error('请输入最多两位小数的数字'));
                                } else if (value <= 0 || value >= 1) {
                                    callback(new Error('请输入一个大于0且小于1的数字'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: ['blur', 'change'] // 在失焦或值改变时触发校验
                        }
                    ]
                }

            };
        },
        methods: {
            getHeight() {
                console.log("tableHeight:" + this.tableHeight);
                this.tableHeight = window.innerHeight - 200;
            },
            opendialog() {
                this.dialogFormVisible = true
               
            },
            resetForm() {
                this.$refs.editformData.resetFields();
                this.fetchData();
            },
            async fetchData() {
                // 获取后台数据，假设使用axios
                this.$axios({
                    method: 'get',
                    url: 'http://localhost:8080/class',
                    
                }).then(res => {
                    if (res.data.code == 1) {
                        this.classes = res.data.data;

                    }

                })
                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8080/scoringcriterion',
                    data: {
                        page: this.currentPage,
                        pageSize: this.pageSize,
                        classId: this.selectData.classId,
                        scName: this.selectData.scName
                    },
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    this.totalCount = res.data.data.total;
                    this.tableData = res.data.data.rows;
                    

                })

            },
           editRow(index, row) {
                
                this.editformData = Object.assign({}, row);
                this.rowData = Object.assign({}, row);
                
                this.dialogEditFormVisible = true;
                    

            },
            Editcancel() {
                this.dialogEditFormVisible = false;
            },
            submitEditForm(){
                var postEditData={
                    scId:this.editformData.scId,
                    classId: '',
                    scName: '',
                    scContent: '',
                    scWeight: '',
                    scMinvalue: null,
                    scMaxvalue: null,
                }
                const keys1 = Object.keys(this.editformData);
                const keys2 = Object.keys(this.rowData);
                var flag = false;

                // 首先检查两个对象的键是否相同
                if (keys1.length !== keys2.length || !keys1.every(key => keys2.includes(key))) {
                    flag = true; // 如果键的数量或内容不同，则对象不同
                }

                // 遍历对象属性并比较值
                for (const key of keys1) {
                    if (this.editformData[key] !== this.rowData[key]) {
                        flag = true; // 只要发现一个属性值不同，即可确定对象不同
                        postEditData[key] =this.editformData[key];
                    } 
                }
                postEditData.scId = this.editformData.scId;
                if(flag===true){
                    this.$axios({
                        method: 'post',
                        url: 'http://localhost:8080/scoringcriterion/edit',
                        data: JSON.stringify(postEditData),
                        headers: { 'Content-Type': 'application/json' },
                    }).then(res => {
                        if (res.data.code === 1) {
                            this.$message.success("修改成功");
                            this.dialogEditFormVisible = false;
                            this.fetchData();
                        } else {
                            this.dialogEditFormVisible = false;
                            this.$message.Error("修改失败");
                        }
                    })
                }else{
                    this.$message.success("未修改数据");
                    this.dialogEditFormVisible = false;
                }
            },
            findByData() {
                this.fetchData();
            },

            clear() {
                this.selectData.classId = '';
                this.selectData.scName = '';
                this.fetchData();
            },

            cancelAdd(){
                 this.dialogFormVisible = false;
                 this.$refs.criterionForm.resetFields();
            },
            submitAdd(){
                this.$refs.criterionForm.validate((valid) => {
                    if (valid) {
                        this.$axios({
                            method: 'post',
                            url: 'http://localhost:8080/scoringcriterion/add',
                            data: JSON.stringify(this.criterionForm),
                            headers: { 'Content-Type': 'application/json' },
                        }).then(res => {
                            if (res.data.code === 1) {
                                this.$message.success("添加成功");
                                this.dialogFormVisible = false;
                                this.fetchData();
                            } else {
                                this.dialogFormVisible = false;
                                this.$message.Error("添加失败");
                            }
                        })
                    }
                })
                
            },
            handleSizeChange(size) {
                this.pageSize = size;
                this.fetchData();
            },
            handleCurrentChange(page) {
                this.currentPage = page;
                this.fetchData();
            },
        },
        created() {
            window.addEventListener('resize', this.getHeight)
        },
        mounted() {
            this.fetchData();
            window.addEventListener('resize', this.getHeight)
        },
    };
</script>
<style lang="less">
    #selectdiv {
        .el-form-item {
            width: 40%;
            margin-right: 0;

            .el-form-item__content {
                line-height: 40px;
                position: relative;
                font-size: 14px;
                width: 140px;
            }
        }

    }

    #adddialog {
        .el-form-item {
            width: 70%;
            margin-right: 0;

            .el-form-item__content {
                line-height: 40px;
                width: 70%;
                font-size: 14px;
            }
        }

    }

    .parentBox {
        padding: 20px;
    }

    .iconBox i {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 20px;
        color: #8c939d;
        font-weight: bold;
        border: 1px #8c939d dashed;
        border-radius: 4px;
        background: rgb(251, 253, 255);
    }

    .iconBox i:hover {
        border: 1px rgb(64, 158, 255) dashed;
    }

    .el-image {
        width: 100px;
        height: 100px;
        border-radius: 4px;
        border: 1px solid rgb(192, 204, 218);
    }

    .gbtpBox {
        position: relative;
    }

    .gbtpBox span {

        top: -110px;
        left: 90px;
        cursor: pointer;
        font-size: 16px;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        background: rgb(245, 108, 108);
        color: #fff;
    }

    .gbtpBox span:hover {
        background: rgb(247, 137, 137);
        color: #fff;
    }

    ::v-deep .avatar-uploader {
        height: 0px;
    }
</style>